<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        input {
            width: 200px;
            height: 30px;
        }

        .box {
            width: 231px;
            margin: 100px auto;
        }

        ul {
            list-style: none;

        }

        li {
            line-height: 30px;
            background-color: green;
        }

        button {
            height: 30px;
        }

        .xbox {
            height: 30px;
            display: flex;
            justify-content: flex-start;
        }

        li:hover {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="xbox">
            <input type="text" value="">
            <button>搜索</button>
        </div>
        <ul></ul>
    </div>
    <script src="data.js"></script>
    <!-- keywords -->
    <script>
        const input = document.querySelector("input");
        const btn = document.querySelector("button");
        const ul = document.querySelector("ul");
        // input的值输入事件
        input.oninput = function () {
            ul.innerHTML = "";
            const value = input.value.trim();
            if (value === "") {
                return;
            }
            ven(value)

        };
        function ven(value) {
            const acc = keywords.filter(function (item) {
                return item.indexOf(value) !== -1;
            })
            acc.forEach(function (item) {
                const li = document.createElement("li")
                li.innerText = item;
                ul.appendChild(li)
                li.onclick = function () {
                    input.value = li.innerText;
                    ul.innerHTML = "";
                }
            })
        }
        btn.onclick = function () {
            ul.innerHTML = ""
            location.href = `https://www.baidu.com/s?wd=${input.value}`
        }
        document.addEventListener("keyup", function (i) {
            if (i.keyCode === 83) {
                input.focus();
            }
        })

    </script>
</body>

</html>